<template>
    <div class="header-wrap">
        <div class="header-container clearfix">
            <img @click="goHome" :src="logoSrc" alt="The Allsportschain Data Explorer">
            <div class="head-right">
                <div class="search-wrap clearfix">
                    <div class="lang-container">
                        <span class="current-lang"><b></b> 中文</span>
                        <div class="toggle-lang-container">
                            <!-- <div @click="toggleLanguage('en')"
                                 :class="['eng-lang', currentLang === 'en'? 'lang-active' : '']">
                                ENGLISH
                            </div> -->
                            <!-- <div @click="toggleLanguage('zh_tw')"
                                 :class="['chn-lang', currentLang === 'zh_tw'? 'lang-active' : '']">繁體中文
                            </div> -->
                        </div>
                    </div>
                    <div class="search-container">
                        <input v-model="searchValue" type="text"
                               :placeholder="$t('head.searchPlaceholder')"
                               class="search-input"
                               @keyup.enter="handleSearch"
                        >
                        <b class="search-btn" @click="handleSearch"></b>
                    </div>
                </div>
                <ul class="nav-list">
                    <li :class="{'nav-item':true,'nav-active': currentIndex === 0}" @click="goHome">
                        {{$t('head.home')}}
                    </li>
                    <li :class="{'nav-item':true,'nav-active': currentIndex === 1}"  @click="goIndustry" class="nav-item-data">
                        {{$t('head.industry')}}
                    </li>
                    <li :class="{'nav-item':true,'nav-active': currentIndex === 2}" @click="goNextTodo">
                        {{$t('head.hongguan')}}
                    </li>
                    <li :class="{'nav-item':true,'nav-active': currentIndex === 3}" @click="goNextTodo">
                        {{$t('head.celue')}}
                    </li>
                    <li :class="{'nav-item':true,'nav-active': currentIndex === 4}" @click="goNextTodo">
                        {{$t('head.cenghui')}}
                    </li>
                    <li :class="{'nav-item':true,'nav-active': currentIndex === 5}" @click="goNextTodo">
                        {{$t('head.yingli')}}
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
import Vue from 'vue';
import '../../static/style/base.less';
import logo from '../assets/logo.png';

export default {
    name: 'headTemp',
    props: ['currentIndex'],
    data () {
        return {
            searchValue: '',
            isSubNavShow: false,
            isSoccerNavShow: false,
            isBallNavShow: false,
            isBlockSubNavShow: false,
            isDappSubNavShow: false,
            isMoreSubNavShow: false,
            logoSrc: logo,
            language: '中文',
            currentLang: Vue.config.lang
        };
    },
    mounted () {
        this.searchValue = this.$route.query.keyword || '';
        this.language = this.$t(`global.${Vue.config.lang}`);
    },
    methods: {
        handleSearch () {
            if (!this.searchValue || !this.searchValue.trim()) {
                this.$Message.error('Don\'t know how to handle');
                return;
            }
            this.$router.push({
                query: {
                    keyword: this.searchValue,
                    pageIndex: 1,
                    pageCount: 20
                }
            });
        },
        goNextTodo () {
            this.$router.push({
                name: 'nexttodo'
            });
        },
        goHome () {
            this.$router.push({
                name: 'home',
                params: {qtype: 2}
            });
        },
        goIndustry () {
            this.$router.push({
                name: 'industry',
                params: {qtype: 3}
            });
        },
        toggleLanguage (lang) {
            window.localStorage.setItem('localeLanguage', lang || 'en');
            window.location.reload(true);
        }
    }
};
</script>

<style scoped lang="less">
    .header-wrap {
        width: 100%;
        height: 90px;
        background: #fff;
        border-bottom: solid 2px #eee;
        color: #000;
        .header-container {
            max-width: 1200px;
            margin: 0 auto;
            height: 90px;
            position: relative;
            img {
                height: 75px;
                cursor: pointer;
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
            }
            .head-right {
                float: right;
                .search-wrap {
                    margin-top: 15px;
                    position: relative;
                    .search-container {
                        position: relative;
                        float: right;
                        margin-right: 10px;
                        .search-input {
                            width: 320px;
                            border: 1px solid #ddd;
                            height: 30px;
                            padding-left: 10px;
                            border-radius: 5px;
                            outline: none;
                            box-shadow: none;
                        }
                        .search-btn {
                            position: absolute;
                            right: 5px;
                            display: inline-block;
                            width: 20px;
                            height: 20px;
                            top: 5px;
                            cursor: pointer;
                            background: url("../assets/search.png");
                            background-size: 100%;
                        }
                    }
                    .lang-container {
                        float: right;
                        position: relative;
                        height: 30px;
                        line-height: 30px;
                        .current-lang {
                            position: relative;
                            color: #999;
                            b {
                                display: inline-block;
                                width: 15px;
                                height: 15px;
                                background: url("../assets/lang.png") no-repeat;
                                background-size: 100% 100%;
                                position: relative;
                                top: 3px;
                                margin-right: 2px;
                            }
                        }
                        .toggle-lang-container {
                            display: none;
                            position: absolute;
                            z-index: 20;
                            bottom: -55px;
                            left: 5px;
                            .eng-lang,
                            .chn-lang {
                                width: 100px;
                                height: 28px;
                                color: #333;
                                line-height: 28px;
                                text-align: center;
                                cursor: pointer;
                                position: relative;
                                background-color: #ddd;
                                &:hover {
                                    background-color: #ccc;
                                }
                            }
                            .eng-lang {
                                border-bottom: 1px solid #ccc;
                            }
                            .lang-active {
                                &:after {
                                    content: '';
                                    position: absolute;
                                    display: block;
                                    width: 16px;
                                    height: 16px;
                                    background: url("../assets/langActive.png") no-repeat;
                                    background-size: 100% 100%;
                                    right: 5px;
                                    top: 50%;
                                    margin-top: -8px;
                                }
                            }
                        }
                        &:hover {
                            .toggle-lang-container {
                                display: block;
                            }
                        }
                    }
                }
                .nav-list {
                    margin-top: 5px;
                    height: 40px;
                    .nav-item {
                        height: 40px;
                        line-height: 40px;
                        float: left;
                        color: #2c3e50;
                        padding: 0 40px;
                        cursor: pointer;
                        font-size: 16px;
                        position: relative;
                        &:hover {
                            &:after {
                                content: '';
                                width: 100%;
                                position: absolute;
                                left: 0;
                                height: 2px;
                                bottom: 1px;
                                background-color: #2d8cf0;
                            }
                        }
                    }
                    .nav-active {
                        &:after {
                            content: '';
                            position: absolute;
                            width: 100%;
                            left: 0;
                            bottom: 1px;
                            height: 2px;
                            background-color: #2d8cf0;
                        }
                    }
                    .nav-item-data {
                        .sub-nav {
                            position: absolute;
                            top: 40px;
                            left: 0;
                            z-index: 10;
                            width: 100%;
                            background-color: #fff;
                            padding-left: 10px;
                            .sub-nav-item {
                                position: relative;
                                font-size: 14px;
                                b {
                                    width: 12px;
                                    height: 12px;
                                    top: 50%;
                                    margin-top: -6px;
                                    right: 5px;
                                    position: absolute;
                                    background: url("../assets/more.png") no-repeat;
                                    background-size: 100% 100%;
                                }
                            }
                        }
                        .third-nav {
                            position: absolute;
                            width: 130px;
                            right: -130px;
                            top: 0px;
                            text-align: left;
                            background-color: #fff;
                            padding-left: 15px;
                            :hover {
                                color: #2d8cf0;
                            }
                        }
                    }
                    .nav-item-block,
                    .nav-item-dapp,
                    .nav-item-more {
                        .sub-nav {
                            position: absolute;
                            top: 40px;
                            left: 0;
                            z-index: 10;
                            width: 100%;
                            background-color: #fff;
                            padding-left: 20px;
                            .sub-nav-item {
                                position: relative;
                                font-size: 14px;
                                b {
                                    width: 12px;
                                    height: 12px;
                                    top: 50%;
                                    margin-top: -6px;
                                    right: 5px;
                                    position: absolute;
                                    background: url("../assets/more.png") no-repeat;
                                    background-size: 100% 100%;
                                }
                            }
                            :hover {
                                color: #2d8cf0;
                            }
                        }
                    }
                }
            }
        }
    }
</style>
